import React, { Component, PropTypes } from 'react'
import { Icon, Popup } from 'antd-mobile'
import { Upload } from 'antd'

const isIPhone = new RegExp('\\biPhone\\b|\\biPod\\b', 'i').test(window.navigator.userAgent);
let wrapProps;
if (isIPhone) {
  // Note: the popup content will not scroll.
  wrapProps = {
    // onTouchStart: e => e.preventDefault(),
  }
}

export default class CentificationStepOne extends Component {
  render() {
    const { nextStep } = this.props
    return (
      <div>
        <div className={`rt-id-card-box`}>
          <div>点击上传身份证</div>
          <div>正面</div>
          <Icon type="plus-circle" onClick={this.popup} />
        </div>
        <div className={`rt-id-card-box`}>
          <div>点击上传身份证</div>
          <div>反面</div>
          <Icon type="plus-circle" onClick={this.popup} />
        </div>

        <p className={`rt-important-notice`}>
          重要提示：请将身份证及手机水平放置拍摄；请对焦拍摄，确保字迹清晰；请确保您的身份证是在有效期内。
        </p>

        <div className={`cm-main-btn`} onClick={nextStep}>下一步</div>
      </div>
    )
  }
  popup() {
    Popup.show(
      <div className={`top-popup-box`}>
        <div>上传身份证</div>
        <div>拍照</div>
        <div>
          <Upload
            showUploadList={false}
            name="album"
          >
            <span>从手机相册选择</span>
          </Upload>
        </div>
        <div>
          <Icon onClick={() => Popup.hide()} type="cross-circle" />
        </div>
      </div>,
      { animationType: 'slide-up', wrapProps, maskClosable: true }
    )
  }
}

CentificationStepOne.propTypes = {
  nextStep: PropTypes.func.isRequired,
}